<template>
  <div class="app-container">
    <el-row>
      <el-col :span="3">
        <mp-list-left @choose="setCurrentMp"/>
      </el-col>
      <el-col :span="20" class="margin-left-10">
        <div class="filter-container">
          <el-select v-model="listQuery.enable" style="width: 200px" class="filter-item" placeholder="请选择用户状态" clearable>
            <el-option v-for="(key,index) in enableDic" :key="index" :label="key.name" :value="key.value" />
          </el-select>
          <el-select v-model="listQuery.gender" style="width: 200px" class="filter-item" placeholder="请选择用户性别" clearable>
            <el-option v-for="(key,index) in genderDic" :key="index" :label="key.name" :value="key.value" />
          </el-select>
          <el-input v-model="listQuery.nickName" clearable class="filter-item" style="width: 200px;" placeholder="请输入昵称"/>
          <el-button v-permission="['mp:user_list']" class="filter-item" type="primary" icon="el-icon-search" @click="search">查找</el-button>
          <el-button v-permission="['mp:user_sync']" class="filter-item" type="danger" icon="el-icon-refresh" @click="syncMpUser">同步用户</el-button>
        </div>
        <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中..." border fit highlight-current-row>
          <el-table-column align="center" width="80px" label="ID" prop="id" sortable />
          <el-table-column align="center" label="头像">
            <template slot-scope="scope">
              <el-image :src="scope.row.avatarUrl" style="width: 60px; height: 60px" fit="fill"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="昵称" prop="nickName" />
          <el-table-column align="center" label="手机号码" prop="phone" />
          <el-table-column align="center" label="性别" prop="genderName" width="80"/>
          <el-table-column align="center" label="地区">
            <template slot-scope="scope">
              {{ scope.row.country }} {{ scope.row.province }} {{ scope.row.city }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="enableName" width="80"/>
          <el-table-column align="center" label="关注状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.subscribe?'success':'danger'" effect="plain">{{ scope.row.subscribe?'已关注':'未关注' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="关注时间" prop="subscribeTime" />
          <el-table-column align="center" label="操作" width="300" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button v-permission="['mp:user_edit']" type="primary" size="mini" @click="handleEnable(scope.row)">{{ scope.row.enable? '冻结':'激活' }}</el-button>
              <el-button v-permission="['mp:user_detail']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button v-permission="['mp:user_delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-permission="['mp:user_list']" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="initList"/>
      </el-col>
    </el-row>
    <el-dialog :close-on-click-modal="false" :title="'编辑'" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="隐藏的用户id" prop="id" hidden>
          <el-input v-model="dataForm.id" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="dataForm.nickName" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model="dataForm.phone" />
        </el-form-item>
        <el-form-item label="用户性别" prop="gender">
          <el-select v-model="dataForm.gender" placeholder="请选择">
            <el-option v-for="(key, index) in genderDic" :key="index" :label="key.name" :value="key.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态" prop="enable">
          <el-select v-model="dataForm.enable" placeholder="请选择">
            <el-option v-for="(key, index) in enableDic" :key="index" :label="key.name" :value="key.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-permission="['mp:user_edit']" type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { UserService } from '@/api/UserService'
import Pagination from '@/components/Pagination'
import Notify from '@/utils/notify'
import MpListLeft from '@/views/wechat/mp_list_left'

const genderDic = [{ value: 2, name: '女' }, { value: 1, name: '男' }]
const enableDic = [{ value: false, name: '冻结' }, { value: true, name: '激活' }]
export default {
  name: 'MpUser',
  components: { Pagination, MpListLeft },
  data() {
    return {
      list: [], total: 0, listLoading: true,
      listQuery: { pageNo: 1, pageSize: 20, nickName: undefined, id: undefined, enable: undefined, gender: undefined, platform: 2, platformId: undefined },
      dataForm: { id: undefined, phone: undefined, gender: undefined, nickName: undefined, enable: true },
      genderDic, enableDic, dialogFormVisible: false, currentMp: undefined,
      rules: {
        nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '用户手机不能为空', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确电话' }],
        gender: [{ required: true, message: '请选择用户性别类型', trigger: 'blur' }],
        enable: [{ required: true, message: '请选择用户状态', trigger: 'blur' }]
      }
    }
  },
  methods: {
    setCurrentMp(data) {
      this.currentMp = data
      this.listQuery.platformId = data.id
      this.initList()
    },
    initList() {
      this.listLoading = true
      UserService.listUser(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    resetForm() {
      this.dataForm = {
        id: undefined, phone: undefined, gender: undefined,
        nickName: undefined, enable: undefined
      }
    },
    search() {
      this.listQuery.pageNo = 1
      this.initList()
    },
    handleEnable(row) {
      this.resetForm()
      this.dataForm.id = row.id
      this.dataForm.enable = !row.enable
      UserService.activeUser(this.dataForm).then(() => {
        Notify.success(this, '状态更改成功!')
        this.initList()
      })
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          UserService.editUser(this.dataForm).then(() => {
            this.dialogFormVisible = false
            Notify.success(this, '更新成功!')
            this.initList()
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('您确定要删除用户' + row.nickName + ' 吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        UserService.deleteUser(row.id).then(() => {
          Notify.success(this, '删除成功!')
          this.initList()
        })
      })
    },
    syncMpUser() {
      const appId = this.currentMp.appId
      this.$confirm('同步用户信息需要一定的时间,请确认是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        UserService.syncMpUser(appId).then(() => {
          this.initList()
          Notify.success(this, '操作成功,请勿重复操作!')
        })
      })
    }
  }
}
</script>
